<template>
  <div class="fenlei">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="分类列表"
      left-text="返回"
      right-text="我的"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- 分类导航 -->
    <div class="content">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="item in list"
            :key="item.id"
            :title="item.name"
            @click="loadProductsById(item.name)"
          />
      </van-sidebar>
      </div>
      <div class="right">
        <van-grid :column-num="2" :gutter="10">
          <van-grid-item
            icon-size=120px
            v-for="item in products"
            :key="item._id"
            :icon="item.coverImg"
            :text="item.name"
            :to="{ name: 'Detail', query: { id: item._id } }"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { FenLei, FenLeiById } from "@/api/product";

export default {
  data() {
    return {
      activeKey: 0,
      list: [],
      products: [
        { _id:"62a06de78de21177d5e644d4",
          coverImg:"https://img.youpin.mi-img.com/shop-fe/9b5af0c7_0540_4b79_a82c_7bfc68657544.jpeg",
          name:"GUCCI古驰 复古金管碎花口红 3.5g",
        },
        { _id:"62a06de78de21177d5e644d8",
          coverImg:"https://img.youpin.mi-img.com/shopmain/768beb93c53535292eb95bfd3c8b8f82.jpg",
          name:"法国迪奥全新烈艳蓝金唇膏999#888#840#720口红",
        },
        { _id:"62a06de78de21177d5e644d9",
          coverImg:"https://img.youpin.mi-img.com/shopmain/4ad21b896cea30df7abf8837ec5d2a4b.jpg",
          name:"水肌美挚爱一生口红礼盒",
        },
         { _id:"62a06de78de21177d5e644cf",
          coverImg:"https://img.youpin.mi-img.com/shopmain/6cf2c4ca071cd03def46b0f004f3c2bc.jpg",
          name:"YSL圣罗兰小金条细管口红2.2g 顺滑易上色",
        },
        
      ],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async created() {
      const result = await FenLei();
      console.log(result, result.categories);
      this.list = result.categories;
    },
    //获取对应内容
    async loadProductsById(name) {
      console.log(123, name);
      const res = await FenLeiById(name);
      this.products = res.products;
      console.log(this.products);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({
        name: "Mine",
      });
    },
  },
  created() {
    this.created();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.content {
  display: flex;
}
.left {
  width: 80px;
}
.right {
  flex: 1;
}

</style>
